{% extends "admin/base_site_nav.html" %}
{% load i18n %}

{% block title %}{% setting 'BRANDING' %}{% endblock %}

{% block extrahead %}{{block.super}}
<script src="/static/js/d3.min.js"></script>
<script>
    var currency = {{currency|json}};
  $(function() {
      dashboard.dragAndDrop();

    $("#horizonbucketsul li a").click(function(){
      $("#horizonbuckets1").html($(this).text() + '  <span class="caret"></span>');
      $("#horizonbuckets").val($(this).prop('name'));
    });

    $("#horizonunitul li a").click(function(){
      $("#horizonunit1").html($(this).text() + '  <span class="caret"></span>');
      $("#horizonunit").val($(this).prop('name'));
    });
  });
</script>
{% endblock %}

{% block content_title %}{% endblock %}

{% block content %}
{% getDashboard as dashboard hiddenwidgets %}
<div id="dashboard">
{% for row in dashboard %}
<div data-cockpit-row="{{ row.rowname }}">
    <div class="row mt-3">
      <div class="col-auto">
         <h1 style="float: left; cursor: move; text-transform: capitalize">{{ row.rowname }}</h1>
      </div>

      <div class="col-auto ms-auto">
        <h1>
        {% if forloop.first %}
          {% block actions %}{% endblock %}
          <button class="btn btn-sm btn-primary" onclick="grid.showBucket()" data-bs-toggle="tooltip"
               data-bs-placement="top" data-bs-title="{% trans 'set time horizon'|capfirst|force_escape %}">
             <span class="fa fa-clock-o"></span>
          </button>
        {% endif %}
          <button class="btn btn-sm btn-primary" onclick="dashboard.customize('{{ row.rowname }}')"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{% trans 'customize'|capfirst|force_escape %}">
            <span class="fa fa-wrench"></span>
          </button>
        {% if forloop.first %}
          <a href="{% setting "DOCUMENTATION_URL" %}/docs/{% version_short %}/user-interface/cockpit.html" target="_blank"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{% trans 'help'|capfirst|force_escape %}">
            <span class="fa fa-question"></span>
        </a>
        {% endif %}
        </h1>
      </div>
    </div>

    <div class="row" id="{{ row.rowname }}">
        {% for cols in row.cols %}
        <div class="cockpitcolumn col-md-{{cols.width}} col-sm-12">
            {% for widget in cols.widgets %}
            <div class="card mb-3" data-cockpit-widget="{{widget.name}}">
                <div class="card-header" data-bs-toggle="tooltip" data-bs-placement="top" title="{{widget.tooltip|escape}}">
                    <span class='fa fa-times float-end ms-2 panel-close'></span>
                    <span class='fa fa-minus float-end  ms-2 panel-toggle'></span>
                    {% if widget.exporturl %}<a href="{{request.prefix}}{{widget.url}}&amp;format=spreadsheet"><span class='fa fa-arrow-down float-end  ms-2 card-header-color'></span></a>
					{% endif %}
                    {% if widget.url %}<a class="text-decoration-underline card-header-color" href="{{request.prefix}}{{widget.url}}">{{widget.title|upper}}&nbsp;<span class="fa fa-caret-right"></span></a>
                    {% else %}<span style="cursor: default">{{widget.title|upper}}</span>
					{% endif %}
                </div>
				<div class="card-body">
					{% if widget.asynchronous %}
					<div id="widget_{{widget.name}}" style="text-align:center"><img src="{{STATIC_URL}}img/loading.gif" height="32" alt="loading"></div>
					{% else %}
					{% renderDashboardWidget widget %}
					{% endif %}
                </div>
			</div>
			{% endfor %}
		</div>
        {% endfor %}
	</div>

	{% for col in row.cols %}
		{% if forloop.first %}<script>{% endif %}
		{% for widget in col.widgets %}
			{% if widget.asynchronous %}$.ajax({
					url: "{{request.prefix}}/widget/{{widget.name}}/{{widget.args}}",
					type: "GET",
					success: function (data) {
					$("#widget_{{widget.name}}").parent().html(data);
					{{widget.javascript|safe}}
					},
					error: function (result, stat, errorThrown) {
					$("#widget_{{widget.name}}").parent().html("{% trans "failed"|capfirst %}");
					}
				});
        {% if widget.repeat %}
        setInterval( function() {
          $.ajax({
            url: "{{request.prefix}}/widget/{{widget.name}}/{{widget.args}}",
            type: "GET",
            success: function (data) {
              {{widget.javascript_before_repeat|safe}};
              $("div.card[data-cockpit-widget='{{widget.name}}'] div.card-body").html(data);
              {{widget.javascript_after_repeat|safe}}
            },
            error: function (result, stat, errorThrown) {
              $("div.card[data-cockpit-widget='{{widget.name}}'] div.card-body").html("{% trans "failed"|capfirst %}");
            }
          });
        }, 5000);
        {% endif %}
			{% else %}
			{{widget.javascript|safe}}
			{% endif %}
		{% endfor %}
		{% if forloop.last %}</script>{% endif %}
	{% endfor %}
</div>
{% endfor %}
</div>

{% include "admin/subtemplate_timebuckets.html" %}

<script>
var hiddenwidgets = [
{% for key, value in hiddenwidgets.items%}{% if not forloop.first %},
{% endif %}  ["{{key|escapejs}}","{{value.title|capfirst|escapejs}}"]{% endfor %}
];
</script>
{% endblock %}
